<template>
  <el-container>
    <el-header>
      <my-title :title="'JSON添加'" />
    </el-header>
    <el-main>

      <el-tabs v-model="currentTabPane" type="border-card">
        <el-tab-pane label="编辑信息" name="1">
          <el-form ref="jsonForm" :model="tempJsonDictionary" label-width="130px" :rules="jsonRules">
            <el-form-item label="名称" prop="name">
              <el-input v-model="tempJsonDictionary.name" style="width:180px" />
            </el-form-item>
            <el-form-item label="编码" prop="code">
              <el-input v-model="tempJsonDictionary.code" style="width:180px" />
            </el-form-item>
            <el-form-item label="是否可删除" prop="del_flag">
              <el-select v-model="tempJsonDictionary.del_flag" placeholder="请选择">
                <el-option
                  v-for="item in dir_logic"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="JSON内容" prop="content">
              <input v-model="tempJsonDictionary.content" type="hidden">
              <div ref="jsoneditor" style="width: 600px;height: 400px;" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-row style="text-align: center;margin-top:20px;">
          <el-button type="primary" @click="addTask">确 定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-row>

      </el-tabs>

    </el-main>

  </el-container>
</template>
<script>
import request from '@/utils/request'
export default {
  data: function() {
    return {
      editor: {},
      dialog1: 'dialog1',
      tempJsonDictionary: {},
      currentTabPane: '1',
      currentJsonDictionary: {},
      jsonRules: {
        name: [
          { required: true, message: '请输入立绘名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入编号', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        del_flag: [
          { required: true, message: '请选择是否删除', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    }
  },
  created() {
    this.directoryUpdate()
    // 主要是该方法
    this.$nextTick(function() {
      this.initEditor()
    })
  },
  methods: {
    // 初始化json编辑器
    initEditor: function() {
      const container = this.$refs.jsoneditor
      const options = {
        mode: 'tree',
        modes: ['text', 'code', 'tree'],
        indentation: 2,
        search: true
      }
      this.editor = new this.$jsoneditor(container, options)
    },
    // 字典更新
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
    },
    // 取消
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    // 获取json文本
    getJSONText: function() {
      const json = JSON.stringify(this.editor.get())
      this.tempJsonDictionary.content = json
    },
    // 验证所有表单
    validate: function() {
      const self = this
      return new Promise(function(resolve) {
        self.$refs['jsonForm'].validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            return false
          }
        })
      })
    },

    // 添加装备任务
    addTask: function() {
      this.getJSONText()
      // 验证表单内容后提交
      this.validate().then(valid => {
        if (valid) {
          this.$progress.start()
          request({
            url: '/preset/json_dictionary/add',
            method: 'post',
            data: this.tempJsonDictionary
          }).then(res => {
            this.$progress.done()
            if (res.result) {
              this.cancel()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }
          ).catch(() => {
            this.$progress.done()
          })
        }
      })
    }
  }
}
</script>
